<template>
  <div class="app-container home">
    
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="padding-top: 100px;padding-left: 400px">
        <h2>欢迎来到充电桩后台管理系统</h2>
      </el-col>
    </el-row>
    <el-divider />

    <div id="main1" style="width: 600px;height:400px;"></div>
    <div id="main2" style="width: 600px;height:400px;margin-left: 650px;margin-top: -400px;"></div>
    
  </div>
</template>

<script setup name="Index">
import { ref, onMounted } from 'vue';
import { getChargerCount } from '@/api/charger/datastatistics'


import * as echarts from 'echarts';


let chargerCountByStatus = { 
  value: [
    { value: 0, name: '空闲' }, 
    { value: 0, name: '使用中' }, 
    { value: 0, name: '维修中' }
  ] 
};

let myChart2; // 将myChart2提升到外部作用域

onMounted(() => {

  const chartDom1 = document.querySelector('#main1');
  const myChart1 = echarts.init(chartDom1);
  myChart1.setOption(option1);


  const chartDom2 = document.querySelector('#main2');
  myChart2 = echarts.init(chartDom2);
  myChart2.setOption(option2);

  chargerCount(); // 确保在初始化图表后调用chargerCount获取数据


 
})



const option1 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '评论',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '好评如潮' },
        { value: 735, name: '真棒' },
        { value: 580, name: '好用' },
        { value: 484, name: '还行' },
        { value: 300, name: '踩' }
      ]
    }
  ]
};



// 半环形图
const option2 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '充电桩各状态数量统计',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      // adjust the start and end angle
      startAngle: 180,
      endAngle: 360,
      data: chargerCountByStatus.value // 直接引用 chargerCountByStatus.value
    }
  ]
};


// 获取各状态充电桩数量
const chargerCount = () => {
  getChargerCount().then(res => {
    chargerCountByStatus.value = res.data.map((item, index) => ({
      value: item.count !== undefined ? item.count : 0, // 确保count存在
      name: chargerCountByStatus.value[index].name
    }));

    if (myChart2) {
      myChart2.setOption({
        series: [{ data: chargerCountByStatus.value }]
      });
    }
  }).catch(error => {
    console.error('Error fetching charger count:', error);
  });
}

// =========================================================================================



</script>

<style scoped lang="scss">
.home {
  h2 {
    margin-top: 10px;
    font-size: 35px;
    font-weight: 100;
  }
}
</style>

